<html>
<head>
  <title>角色管理</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<script language="javascript" src="/static/js/jquery-3.5.1.js"></script>
	<script language="javascript" src="/static/js/import.js"></script>
  <style type="text/css">
		#toolbar{
			float: left;
		}
  </style>
  <script language="javascript">
		function modRole(id){
			var role = $("#roleTable").bootstrapTable("getRowByUniqueId",id);
			$("#roleForm input").val(null);
			$("#roleForm select").val(null);
			$.each(role,function (key,value) {
				$("#roleForm #"+key).val(value);
			});
			$("#roleModal").modal("show");
		};
		function delRole(id,name){
			Dialog.confirm({
				title:"删除确认",
				message:"是否确认删除角色："+name,
				callback:function (confirmed) {
					if(confirmed){
						$.ajax({
							url: "/role/del.do",
							type: "post",
							data:{id:id},
							success: function (data) {
								if(data.code == 200){
									$("#roleTable").bootstrapTable("refresh");
									Message.success("删除成功！")
								}else{
									Message.danger(data.msg);
								}
							}
						});
					}
				}
			});
		};
		function checkChildNode(node){
			if(!node.nodes||node.nodes.length==0){
				return;
			}
			var childs = $("#menuTree").treeview("getNodes",[node.id,"pId"]);
			childs.forEach(function (child) {
				$("#menuTree").treeview("checkNode",[child,{silent:true}]);
				checkChildNode(child);
			});
		};
		function checkParentNode(node){
			var parent = $("#menuTree").treeview("getParent",node);
			if(!parent){
				return;
			}
			$("#menuTree").treeview("checkNode",[parent,{silent:true}]);
			checkParentNode(parent);
		};
		function unCheckChildNode(node){
			if(!node.nodes||node.nodes.length==0){
				return;
			}
			var childs = $("#menuTree").treeview("getNodes",[node.id,"pId"]);
			childs.forEach(function (child) {
				$("#menuTree").treeview("uncheckNode",child);
				unCheckChildNode(child);
			});
		};
		function unCheckParentNode(node){
			var childs = $("#menuTree").treeview("getSiblings",node);
			var checkeds = childs.filter(function (obj) {
				return obj.state.checked;
			});
			if(checkeds.length==0){
				var parent = $("#menuTree").treeview("getParent",node);
				$("#menuTree").treeview("uncheckNode",[parent,{silent:true}]);
				unCheckParentNode(parent);
			}
		};
		function getSelectionRoles(){
			return $("#roleTable").bootstrapTable("getSelections");
		};
		function onRoleStatus(id){
			roleStatus(id,1);
		}
		function offRoleStatus(id){
			roleStatus(id,2);
		}
		function roleStatus(id,status){
			$.ajax({
				url: "/role/roleStatus.do",
				type: "post",
				async: false,
				data: {id:id,status:status},
				success: function (result) {
					if(result.code == 200){
						$("#roleTable").bootstrapTable("refresh");
					}else {
						Message.danger(result.msg);
					}
				}
			});
		}
	$(function(){
		var userId = window.getQueryVariable("userId");
		$("#roleTable").bootstrapTable({
			height: 690,
			url:"/role/queryWithPage.do",
			method: 'post',
			dataType: 'json',
			uniqueId: 'id',
			totalField: 'total',
			dataField: 'rows',
			pagination: true,
			pageSize: 100,
			sidePagination: 'server',
			queryParams: function () {
				return {
					pageSize:this.pageSize,
					pageNumber:this.pageNumber,
					params:$("#queryForm").serializeJSON()
				};
			},
			clickToSelect: true,
			singleSelect: true,
			onClickRow: function onClickRow(item, $element) {
				$("#menuTree").treeview("uncheckAll",{silent:true});
				if(!item.menuIds){
					return;
				}
				item.menuIds.split(",").forEach(function (menuId) {
					var nodes = $("#menuTree").treeview("getNodes",[menuId,"id"]);
					if(nodes&&nodes.length>0){
						$("#menuTree").treeview("checkNode",[nodes[0],{silent:true}]);
					}
				});
			},
			columns:[
				{field: 'check',checkbox: true,
					formatter: function (value, row, index) {
						return row.userIds&&userId&&row.userIds.indexOf(userId)>-1;
					}},
				{title: '角色名称',field: 'name',align: 'center'},
				{title: '角色编码',field: 'code',align: 'center'},
				{title: '角色状态',field: 'status',align: 'center',
					formatter:function (value, row, index) {
						var off = '<i class="bi bi-toggle-off" style="font-size: 34px;cursor: pointer" onclick="onRoleStatus('+row.id+')"></i>';
						var on = '<i class="bi bi-toggle-on" style="color: green;font-size: 34px;cursor: pointer" onclick="offRoleStatus('+row.id+')"></i>';
						return value==1?on:off;
					}},
				{
					title: '操作',
					field: 'op',
					align: 'center',
					formatter: function (value, row, index) {
						var mod = '<button href="#" class="btn btn-warning m-1" onclick="modRole('+row.id+')">编辑</button>';
						var del = '<button href="#" class="btn btn-warning m-1" onclick="delRole('+row.id+',\''+row.name+'\')">删除</button>';
						return mod+del;
					}
				}
			]
		});

		if(userId){
			$("#roleTable").bootstrapTable("refreshOptions",{singleSelect:false});
			$("#addBtn").hide();
			$("#saveBtn").hide();
		}

		$.ajax({
			url: "/menu/tree.do",
			type: "post",
			data: {mode:"role"},
			success: function (menuNodes) {
				if(!menuNodes){
					return;
				}
				$("#menuTree").treeview({
					data:menuNodes,
					levels: 3,
					showIcon: true,
					showTags: false,
					selectable: false,
					showBorder: false,
					showCheckbox: true,
					checkedIcon: 'bi bi-check-square-fill',
					uncheckedIcon: 'bi bi-app',
					expandIcon: 'bi bi-caret-down-fill',
					collapseIcon: 'bi bi-caret-right-fill',
					onNodeChecked: function (event,node) {
						checkChildNode(node);
						checkParentNode(node);
					},
					onNodeUnchecked: function (event,node) {
						unCheckChildNode(node);
						unCheckParentNode(node);
					}
				});
			}
		});

		$("#queryBtn").click(function () {
			$("#roleTable").bootstrapTable("refresh");
		});

		$("#addBtn").click(function () {
			$("#roleForm input").val(null);
			$("#roleForm select").val(null);
			$("#roleModal").modal("show");
		});

		$("#saveBtn").click(function () {
			var roles = $("#roleTable").bootstrapTable("getSelections");
			if(!roles||roles.length==0){
				Message.info("请选择需要授权的角色！");
			}
			var menus = $("#menuTree").treeview("getChecked");
			var menuIds = [];
			menus.forEach(function (menu) {
				menuIds.push(menu.id);
			});
			$.ajax({
				url: "/role/relateMenu.do",
				type: "post",
				contentType: 'application/json',
				data: JSON.stringify({roleId:roles[0].id,menuIds:menuIds}),
				success: function (result) {
					if(result.code == 200){
						$("#roleTable").bootstrapTable("refresh");
						Message.success("保存成功！");
					}else {
						Message.danger(result.msg);
					}
				}
			});
		});

		$("#roleForm").ajaxForm({
			url: "/role/save.do",
			type: "post",
			success: function(result){
				if(result.code == 200){
					$("#roleTable").bootstrapTable("refresh");
					$("#roleModal").modal("hide");
					Message.success("保存成功！");
				}else {
					Message.danger(result.msg);
				}
			}
		});
	});
  </script>
</head>
<body>
	<div class="d-flex flex-column">
		<div class="d-flex flex-column">
			<form id="queryForm" class="row pt-2">
				<div class="col-3"><input type="text" class="form-control" placeholder="角色编码" name="code"/></div>
				<div class="col-3"><input type="text" class="form-control" placeholder="角色名称" name="name"/></div>
			</form>
			<div class="row p-2 w-25" id="toolbar">
				<div class="col-4"><button class="btn btn-primary" id="addBtn">添加</button></div>
				<div class="col-4"><button class="btn btn-primary" id="queryBtn">查询</button></div>
			</div>
		</div>
		<div class="d-flex flex-row">
			<div class="d-flex flex-column flex-fill">
				<table class="table table-sm table-hover table-bordered table-striped" id="roleTable" data-bs-toggle="table"></table>
			</div>
			<div class="d-flex flex-column" style="width: 400px;">
				<div class="col-3 ms-5"><button class="btn btn-primary" id="saveBtn">保存</button></div>
				<div id="menuTree"></div>
			</div>
		</div>
	</div>

	<div class="modal fade modal-dialog position-absolute" id="roleModal" style="margin-top:100px;margin-left: -250px;left:50%">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
				</div>
				<form id="roleForm">
					<div class="modal-body" style="height: 250px;width: 500px">
						<input type="hidden" id="id" name="id">
						<label for="name">角色名称：</label>
						<input type="text" id="name" name="name" class="form-control">
						<label for="code">角色编码：</label>
						<input type="text" id="code" name="code" class="form-control">
						<label for="status">角色状态：</label>
						<select class="form-select" id="status" name="status">
							<option value="1">启用</option>
							<option value="2">禁用</option>
						</select>
					</div>
					<div class="modal-footer">
						<button type="submit" class="btn btn-primary">保存</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</body>
</html>
